<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>my demo</title>
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/list.css">
</head>
<body>
  <!-- 商品展示的部分 -->
  <div class="wrapper">

    <!-- 面包屑的导航 -->
    <div class="crumbs">
      <span class="item">首页</span>
      <span>&gt;</span>
      <span class="item">笔记本</span>
    </div>
    <!-- 对内容进行操作 -->
    <div class="operation">
      <ul class="row category">
        <li class="item">分类：</li>
        <li class="item">笔记本</li>
        <li class="item">台式机</li>
        <li class="item">智慧屏</li>
      </ul>
      <ul class="row discount">
        <li class="item">服务优惠：</li>
        <li class="item">仅看有货</li>
        <li class="item">分期免息</li>
        <li class="item">优惠商品</li>
      </ul>
      <ul class="row sort">
        <li class="item">排序：</li>
        <li class="item">综合</li>
        <li class="item">最新</li>
        <li class="item">评论数</li>
        <li class="item">价格</li>
      </ul>
    </div>
    <!-- 商品列表的部分 -->
    <ul class="products">
    </ul>
  </div>

  <script src="../data/products_data.js"></script>
  <script src="../js/util.js"></script>
  <script>
    window.onload = function () {
    /*
      1.获取服务优惠中的item
      2.监听item的点击
        * 切换active
      3.根据item的点击获取filterItem
        * 将其放在一个数组中
      4.根据最新的filter, 过滤数据
        * filterResultListAction
      5.根据过滤的最新数据进行展示
        * showResultListAction
    */
      var serverUrl = "https://res.vmallres.com/pimages"
      var categoryEl = document.querySelector(".category")
      categoryEl.firstElementChild.nextElementSibling.classList.add("active")
      var sortEl = document.querySelector(".sort")
      sortEl.firstElementChild.nextElementSibling.classList.add("active")
      var discountEl = document.querySelector(".discount")
      var productsEl = document.querySelector(".products")

      var discountFilters = []
      for (var i = 1; i < discountEl.children.length; i++) {
        
        var discountItemEl = discountEl.children[i]
        discountItemEl.onclick = function() {
          this.classList.toggle("active")
          
          if(this.classList.contains("active")) {
            discountFilters.push(this.textContent.trim())
          } else {
            var filterItem = this.textContent.trim()
            var filterIndex = discountFilters.findIndex(function(item) {
              return item === filterItem
            })
            discountFilters.splice(filterIndex, 1)
          }
          filterResultListAction()
        }
      }

      //排序
      var sortFilter = ""
      var sortRelation = {"评论数": "rateCount", "价格": "price"}
      for (var i = 0; i < sortEl.children.length; i++) {
        var sortItemEl = sortEl.children[i]
        sortItemEl.onclick = function() {

          for (var item of sortEl.children) {
            item.classList.remove("active")
          }
          this.classList.add("active")
          var sortFilterText = this.textContent.trim()
          if (sortRelation[sortFilterText]) {
            sortFilter = sortRelation[sortFilterText]
          }
          showResultListAction()
        }
      }

      var showResultList = resultList
      function filterResultListAction() {
        
        showResultList = resultList.filter(function (item) {
          var isFlag = true
          for (var filterItem of discountFilters) {
            if (!item.services.includes(filterItem)) {
              isFlag = false
              break
            }
          }
          return isFlag
        })

        showResultListAction()
      }

      showResultListAction()

      function showResultListAction() {

        //排序
        sortResultListAction()

        productsEl.innerHTML = ""
        for(var i = 0; i < showResultList.length; i++) {
          var resultItem = showResultList[i]
          var itemEl = document.createElement("li")
          itemEl.classList.add("item")

          var serviceString = ""
          for (var label of resultItem.promoLabels) {
            serviceString += `<span class="tip">${label}</span>`
          }
          itemEl.innerHTML = `
          <a href="#">
          <img class="album" src="${serverUrl}${resultItem.photoPath}/428_428_${resultItem.photoName}" alt="">
          <div class="name">${resultItem.name}</div>
          <div class="discount">${resultItem.promotionInfo}</div>
          <div class="price">¥${resultItem.price}</div>
          <div class="service">
            ${serviceString}
          </div>
          <div class="comment">
            <span>${resultItem.rateCount}人评论</span>
            <span>${resultItem.goodRate}% 好评</span>
          </div>
        </a>
          `
          productsEl.append(itemEl)
        }
        addProductsEmptyItem()
      }

      function sortResultListAction() {
        
        showResultList.sort(function(item1,item2) {
          return item2[sortFilter] - item1[sortFilter]
        })

      }
      
      function addProductsEmptyItem() {
        for (var i = 0; i < 3; i++) {
          var emptyItem = document.createElement("li")
          emptyItem.classList.add("item")
          emptyItem.classList.add("empty")
          productsEl.append(emptyItem)
        }
      }
    }

  </script>  
</body>
</html>